import React from 'react';
import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';
import Input from './Input';
import Icon from 'react-native-vector-icons/AntDesign';
export default class ImageInput extends Input {
  renderChildren() {
    const images = [
      'https://i.picsum.photos/id/38/300/300.jpg',
      'https://i.picsum.photos/id/39/300/300.jpg',
      'https://i.picsum.photos/id/40/300/300.jpg',
      'https://i.picsum.photos/id/41/300/300.jpg',
    ];
    return (
      <View style={styles.container}>
        {images.map((ele) => (
          <View>
            <Image source={{uri: ele}} style={styles.imageSize} />
            <TouchableOpacity
              activeOpacity={0.8}
              style={styles.removeContainer}>
              <Icon
                name="closecircle"
                color="#969799"
                size={16}
                style={styles.remove}
              />
            </TouchableOpacity>
          </View>
        ))}

        <TouchableOpacity style={[styles.add, styles.imageSize]}>
          <Icon name="plus" size={30} color="#969799" />
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingBottom: 10,
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  removeContainer: {
    position: 'absolute',
    right: 0,
    top: 0,
    borderRadius: 9,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    width: 18,
    height: 18,
  },
  remove: {width: 16, height: 16},
  add: {
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderStyle: 'dashed',
    borderColor: 'rgb(235, 237, 240)',
  },
  imageSize: {
    width: 80,
    height: 80,
    borderRadius: 4,
    marginRight: 8,
    marginTop: 8,
  },
});
